<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>swiper demo</title>
    <!-- IMPORT CSS -->
    <link rel="stylesheet" href="css/reset.min.css">
    <link rel="stylesheet" href="css/swiper-bundle.min.css">
    <style>
        .swiper-container {
            margin: 0 auto;
            width: 1226px;
            height: 460px;
            overflow: hidden;
        }

        .swiper-container .swiper-slide {
            width: 1226px;
            height: 460px;
        }

        .swiper-container .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
        }

        /* .swiper-pagination-bullet-active {
            background: red !important;
        } */
    </style>
</head>

<body>
    <!-- <div class="swiper-container" id="swiper1">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img data-src="images/1.jpg" alt="" class="swiper-lazy">
                <div class="swiper-lazy-preloader"></div>
            </div>
            <div class="swiper-slide">
                <img data-src="images/2.webp" alt="" class="swiper-lazy">
                <div class="swiper-lazy-preloader"></div>
            </div>
            <div class="swiper-slide">
                <img data-src="images/3.webp" alt="" class="swiper-lazy">
                <div class="swiper-lazy-preloader"></div>
            </div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div> -->

    <div class="swiper-container" id="swiper1">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="images/1.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="images/2.webp" alt="">
            </div>
            <div class="swiper-slide">
                <img src="images/3.webp" alt="">
            </div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

    <!-- IMPORT JS -->
    <script src="js/swiper-bundle.min.js"></script>
    <script>
        let mySwiper = new Swiper('#swiper1', {
            loop: true,
            autoplay: {
                delay: 3000,
                disableOnInteraction: false
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev'
            }
        });


        /* let mySwiper = new Swiper('#swiper1', {
            // 无限循环切换
            loop: true,
            // 自动轮播
            autoplay: {
                delay: 1000,
                disableOnInteraction: false
            },
            // 切换效果
            // slide:左右运动  fade:渐隐渐现  cube:魔方  coverflow:3D切换  flip:3D翻转 ...
            effect: 'slide',
            // 分页器
            pagination: {
                el: '.swiper-pagination',
                clickable: true
            },
            // 左右导航按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev'
            },
            // 开启延迟加载
            // lazy: true,
            lazy: {
                loadPrevNext: true,
            },
            // 事件监听
            on: {
                init(swiper) {
                    // swiper是当前创建的实例
                    //  + slides 存储所有的slide元素
                    //  + activeIndex 存储当前选中slide的索引
                    console.log('初始化完毕后触发', swiper);
                },
                transitionEnd(swiper) {
                    console.log('切换完毕后触发', swiper.activeIndex);
                }
            }
        }); */

        // 实例具备的方法  mySwiper.xxx()
        //  + mySwiper.slideNext(speed, runCallbacks)
        //    speed是切换的速度，默认是300，设置为0，则本次切换不会出现动画效果
        //    runCallbacks切换完触发的回调函数
        //  + mySwiper.slidePrev(speed, runCallbacks)
        //  + mySwiper.slideTo(index, speed, runCallbacks) 切换到指定索引项
        //  + updateSlides 在轮播图的样式或者slide数量动态操作后，我们需要重新计算
        //  + updateSize
        //  + ...
    </script>
</body>

</html>